<template>
  <div>
     <bread class="filter">
      <h1>
        下载中心
      </h1>
      <div class="filter-block">
        <search-box
          ref="searchBox"
          class="search-box"
          placeholder="搜索成果"
          :keyword="keyword"
          @search="getSearchWords"
          @clear="clearSearch"
          @active="hideFilter = true"
          @deactive="hideFilter = false">
        </search-box>
      </div>
      <div class="filter-block">
        <normal-filter
          :label="filters.text"
          @change="handleLanguage"
          :options="filters.dataset">
        </normal-filter>
      </div>
      <div class="pull-right">
        <el-button size="small" type="success">批量下载</el-button>
      </div>
    </bread>
    <pageContent hasPagination>
      <el-table
        show-header
        ref="multipleTable"
        :data="tableData3"
        tooltip-effect="dark"
        style="width: 100%"
        header-row-class-name="custom-table-header-gray"
        stripe
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="类型"
          width="120">
          <template slot-scope="scope">{{ scope.row.type }}</template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          width="320">
        </el-table-column>
        <el-table-column
          prop="size"
          width="80"
          label="大小"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="theme"
          label="主题"
          width="320"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="author"
          label="上传人"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="time"
          sortable
          label="发布时间"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="操作"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <a href="" class="down-btn">下载</a>
          </template>
        </el-table-column>
      </el-table>
    </pageContent>
    <pagination
      :total="total"
      :page-size="pageSize"
      @changePage="fetchData">
    </pagination>
    <!-- <el-dialog
      title="确认发布"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span v-if="true">此公告发布时将通过APP、系统消息通知 全校</span>
      <span v-if="false">您没有选择通过APP、系统消息通知任何二级单位 是否确认发布</span>
      <span v-if="false">此公告发布时将通过APP、系统消息通知 柯基学院、外国语学院、美术学院、名字特别长名字特别长名字特别长名字特别长学院 </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import pagination from 'components/pagination';
import NormalFilter from 'components/NormalFilter';
import SearchBox from 'components/SearchBox';
import back from 'mixins/back';

const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
  name: 'hello',
  components: {
    pagination,
    NormalFilter,
    SearchBox
  },
  data () {
    return {
      activeName: 'second',
      form: {
        name: '',
        desc: ''
      },
      keyword: '',
      dialogVisible: true,
      dialog_college: false,
      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true,
      total: 1000,
      pageSize: 30,
      filters: {
        dataset: [{txt: '全部', val: '0'}, {txt: '中文成果', val: '1'}, {txt: '英文成果', val: '2'}],
        text: '附件类型'
      },
      tableData3: [{
        type: 'doc',
        date: '2016-05-03',
        name: '2019年中山大学科技创新发展专项资金项目公示',
        size: '40.0k',
        theme: '院学校现已将常用文件模板发布在科管系统士',
        author: '张三',
        time: '2018-05-30'
      }, {
        type: 'doc',
        date: '2016-05-03',
        name: '2019年中山大学科技创新发展专项资金项目公示',
        size: '40.0k',
        theme: '院学校现已将常用文件模板发布在科管系统士',
        author: '张三',
        time: '2018-05-30'
      }, {
        type: 'doc',
        date: '2016-05-03',
        name: '2019年中山大学科技创新发展专项资金项目公示',
        size: '40.0k',
        theme: '院学校现已将常用文件模板发布在科管系统士',
        author: '张三',
        time: '2018-05-30'
      }, {
        type: 'doc',
        date: '2016-05-03',
        name: '2019年中山大学科技创新发展专项资金项目公示',
        size: '40.0k',
        theme: '院学校现已将常用文件模板发布在科管系统士',
        author: '张三',
        time: '2018-05-30'
      }, {
        type: 'doc',
        date: '2016-05-03',
        name: '2019年中山大学科技创新发展专项资金项目公示',
        size: '40.0k',
        theme: '院学校现已将常用文件模板发布在科管系统士',
        author: '张三',
        time: '2018-05-30'
      }, ],
      multipleSelection: []
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClose() {

    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleLanguage(){},
    getSearchWords(){},
    clearSearch(){},
    fetchData(){},
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    }
  },
};
</script>
<style lang="scss">
  @import './index.scss';
</style>
